<template>
	<view class="container">
		<view class="main">
			<view class="section_bg">
				<view class="up">
					<text class="red">*</text>
					<view class="left">联系人</view>
				</view>
				<view class="down">
					<input class="textarea" v-model="name" placeholder="请输入联系人"></input>
				</view>
			</view><!--section_bg end-->
			<view class="section_bg">
				<view class="up">
					<text class="red">*</text>
					<view class="left">联系电话</view>
				</view>
				<view class="down">
					<input class="textarea" v-model="phone" placeholder="请输入联系电话"></input>
				</view>
			</view><!--section_bg end-->
			<view class="time_bg">
				<view class="left">
					<text class="red">*</text>
					<text class="text">省市区</text>
				</view>
				<view class="right">
					<yhdslplace @change="change">
						<view class="add_text">{{place}}</view>
					</yhdslplace>
					<image class="arrow" src="/static/images/arrow.png"></image>
				</view>
			</view><!--safe_bg end-->
			<view class="detail_bg">
				<view class="up">
					<text class="red">*</text>
					<view class="left">详细地址</view>
				</view>
				<view class="down">
					<textarea class="textarea" v-model="address" placeholder="请输入详细地址"></textarea>
				</view>
			</view><!--detail_bg end-->
			
		</view><!--main end-->
		<view class="footer">
			<view class="submit-btn" @click="submitEvent()">确定</view>
		</view>
		
	</view>
</template>

<script>
	import yhdslplace from '@/components/yhdsl-place/yhdsl-place.vue';
	export default {
		data() {
			return {
				name:'',
				phone:'',
				address:'',
				place: '',
				type:1,
			}
		},
		components: {
			yhdslplace
		},
		onLoad: function(option) {
			this.type = option.type;
			this.name = option.name;
			this.phone = option.phone;
			this.address = option.address;
			if(option.place){
				this.place = option.place;
			}
			console.info(this.place)
		},
		methods: {
			change(val) {
				console.log(val);
				this.place = val.data.join('/');
			},
			//确认下一步
			submitEvent(){
				if(this.name.length == 0){
					uni.showToast({
						icon:'none',
						title:'请填写联系人'
					})
					return;
				}
				if(this.phone.length == 0){
					uni.showToast({
						icon:'none',
						title:'请填写联系人电话'
					})
					return;
				}
				if(this.place.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择省市区'
					})
					return;
				}
				if(this.address.length == 0){
					uni.showToast({
						icon:'none',
						title:'请填写详细地址'
					})
					return;
				}
				let data = {
					name:this.name,
					phone:this.phone,
					address:this.address,
					place:this.place,
					type:this.type
				};
				console.info(data);
				let pages = getCurrentPages() ;
				let prevPage = pages[pages.length -2];
				prevPage.$vm.address_data_receive(data) ;
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.main{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			margin-bottom: 100;
			
			.time_bg{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 100rpx;
				margin-top: 20rpx;
				background-color: white;
				padding: 30rpx;
				justify-content: space-between;
				.left{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 150rpx;
					.red{
						color: red;
					}
					.text{
						font-size: 28rpx;
						color: black;
					}
				}
				.right{
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
					text-align: right;
					justify-content: flex-end;
					margin-left: 20rpx;
					.address_content{
						flex: 1;
						background-color: red;
					}
					.add_text{
						font-size: 28rpx;
						color: black;
						margin-right: 20rpx;
						width: 400rpx;
						height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}
					.arrow{
						width: 26rpx;
						height: 26rpx;
					}
				}
			}//time_bg end
			
			.detail_bg{
				display: flex;
				flex-direction: column;
				background-color: white;
				margin-top: 20rpx;
				padding: 30rpx;
				.up{
					display: flex;
					flex-direction: row;
					.red{
						color: red;
					}
					.left{
						font-size: 28rpx;
						color: black;
					}
					
				}
				.down{
					margin-top: 40rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.textarea{
						// padding: 10rpx 20rpx;
						color: black;
						// border: 1rpx solid #f2f2f2;
						border-radius: 10rpx;
						height: 100rpx;
						font-size: 28rpx;
					}
				}
			}//remark_bg end
			.section_bg{
				display: flex;
				flex-direction: row;
				background-color: white;
				margin-top: 20rpx;
				padding: 30rpx;
				.up{
					display: flex;
					flex-direction: row;
					width: 150rpx;
					align-items: center;
					.red{
						color: red;
					}
					.left{
						font-size: 28rpx;
						color: black;
					}
					
				}
				.down{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					flex: 1;
					.input{
						// padding: 10rpx 20rpx;
						color: black;
						// border: 1rpx solid #f2f2f2;
						border-radius: 10rpx;
						font-size: 28rpx;
						background-color: red;
					}
				}
			}//section_bg end
			
		}//main end
		
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}//footer end
		
	}
	
</style>
